<template>
	<view>
		<u-navbar title="投诉" :border-bottom="false" :background="{backgroundColor: '#00a8ff'}">
		</u-navbar>
		<view class="bgf3f5f7">
			<view class="bgFFFFFF u-p-r-26 u-p-l-26 u-m-b-20">
				<view class="title">
					请选择你想要举报的类型
				</view>
				<u-radio-group v-model="value" @change="radioGroupChange">
					<view class="" style="width: 50%;display:inline-block;" v-for="(item, index) in list" :key="index">
						<u-radio @change="radioChange" :disabled="item.disabled" :name="item.name">
							{{item.name}}
						</u-radio>
					</view>
				</u-radio-group>
			</view>
			<view class="bgFFFFFF u-p-r-26 u-p-l-26 u-m-b-20">
				<view class="title">
					投诉描述（必填）
				</view>
				<u-input type="textarea" v-model="content" placeholder="请输入描述和证据信息"
					style="background-color: #f5f4f7;font-size: 22rpx;padding: 10rpx;"></u-input>
			</view>
			<view class="bgFFFFFF u-p-r-26 u-p-l-26 u-m-b-20">
				<view class="title">
					图片证据（选填）
				</view>
				<u-upload ref="uUpload" :auto-upload="true" :action="action" @on-change="onChange" :file-list="fileList"
					:max-size="5 * 1024 * 1024" max-count="9"></u-upload>
			</view>

			<u-button @click="setfeedback()" type="primary" style="width: 90%;margin: 0 auto;">提交</u-button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '广告内容',
						disabled: false

					},
					{
						name: '虚假互动数据',
						disabled: false

					},
					{
						name: '不友善内容',
						disabled: false
					},
					{
						name: '造谣、伪科学',
						disabled: false
					},
					{
						name: '搬运抄袭',
						disabled: false
					},
					{
						name: '色情低俗',
						disabled: false
					},
					{
						name: '违法违规',
						disabled: false
					},
					{
						name: '其他',
						disabled: false
					},
				],
				action: 'http://zjmeifeng.oss-cn-beijing.aliyuncs.com',
				fileList: [],
				id: '',
				value: '',
				title: '',
				content: '',
				image: '',
			}
		},
		onLoad(e) {
			console.log("科普文章id", e);
			this.id = e.id;
		},
		methods: {
			onChange(res, index, lists, name, path) {
				// this.images1 = this.retOn(path);
				console.log(path);
				let str = '';
				for (let key in path) {
					str += path[key] + ","
				}
				console.log(str);
				this.image = str
			},

			// 提交反馈
			setfeedback() {

				if (this.title == '') {
					this.GshowToast('类型不能为空');
				} else if (this.content == '') {
					this.GshowToast('内容不能为空');
				} else if (this.image == '') {
					this.GshowToast('青山成功');
				} else {
					console.log("提交反馈");
					this.$apiCoupe.setfeedback({
						id: this.id,
						title: this.title,
						content: this.content,
						image: this.image
					}).then((res) => {
						console.log("提交反馈", res.data);
						if (res.data.code == 1) {
							this.GshowToast('投诉成功');

							setTimeout(() => {
								uni.navigateBack()
							}, 2000)
						}
					}).catch((err) => {
						console.log('request fail', err);
					});
				}


			},

			GshowToast(title) {
				uni.showToast({
					title: title
				})
			},

			radioChange(e) {
				console.log(e);
				this.title = e;
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		line-height: 80rpx;
		font-weight: 700;
	}
</style>
